<!DOCTYPE html>
<html>

<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                            <i class="fa fa-bars icon"></i>  
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="elm-wrap">
                                    <div class="alert alert-info" role="alert">
                                        作业流程开始后，流程内作业任务同步下发到指定岗位
                                    </div>
                                </div>
                                <div class="elm-wrap role-el">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <!-- 左侧列表 -->
                                            <div class="elm-card" v-for="(info,index) in list" @click="showRight(info)" :class={active:info.job_process_id==accTaskFlow.job_process_id}>
                                                <div class="row no-gap">
                                                    <div class="col-sm-8">
                                                        <p class="title doublet">{{info.job_process_name}}</p>
                                                    </div>
                                                    <div class="col-sm-4" style="min-width:79px;">
                                                        <div class="btngroup"><a href="" @click.prevent.stop="editing(info)">编辑</a> | <a href="" @click.prevent="deling(info)">删除</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="elm-card elm-card-add" @click="editing()">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <p class="title">+</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 右侧数据 -->
                                        <div class="col-sm-8">
                                            <form action="" class="right-form"> 
                                                <div class="form-group form-inline">
                                                    <label for="inputName" class=" control-label">作业流程名称：</label>
                                                    <input v-focus="editable" type="text" name="rolename" class="form-control" id="inputName" placeholder="作业流程名称" :readonly="!editable" v-model="name">
                                                    <span v-show="!validate.name" class="form-control-static font-alert"> {{validate.validNameTxt}}</span>
                                                </div>
                                                <!-- 已选任务 -->
                                                <div class="row" :class="{taskflow:editable}">
                                                    <div class="col-sm-4" v-if="editable" style="margin-bottom:0px;">
                                                        <div class="elm-card elm-card-sm elm-card-add" @click="addTaskable = !addTaskable">
                                                            <div class="row">
                                                                <div class="col-sm-12">
                                                                    <p class="title">+</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 每个元素 -->
                                                    <div class="col-sm-4" v-for="(task,index) in accTask">
                                                        <div class="elm-card elm-card-sm" style="margin-bottom:0px;">
                                                            <div class="row no-gap">
                                                                <template v-if="editable">
                                                                    <div class="col-sm-9">
                                                                        <p class="title">{{task.job_name}}</p>
                                                                    </div>
                                                                    <div class="col-sm-3" style="min-width:33px;">
                                                                        <div class="btngroup"><a href="" @click.prevent="deltask(task)">删除</a></div>
                                                                    </div>
                                                                </template>
                                                                <template v-else>
                                                                    <div class="col-sm-12">
                                                                        <p class="title">{{task.job_name}}</p>
                                                                    </div>
                                                                </template>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <p v-if="!validate.rights" class="form-control-static font-alert">请为该作业流程添加作业任务！</p>
                                                
                                                <!-- 任务选择池 -->
                                                <div v-if="editable && addTaskable" class="row taskflow">
                                                    <p class="list-title">可选作业任务</p>
                                                    <div class="col-sm-4" v-for="(task,index) in utaskList">
                                                        <div class="elm-card elm-card-sm" style="margin-bottom:0px;">
                                                            <div class="row no-gap">
                                                                <template v-if="editable">
                                                                    <div class="col-sm-9">
                                                                        <p class="title">{{task.job_name}}</p>
                                                                    </div>
                                                                    <div class="col-sm-3" style="min-width:33px;">
                                                                        <div class="btngroup"><a href="" @click.prevent="addtask(task)">添加</a></div>
                                                                    </div>
                                                                </template>
                                                                <template v-else>
                                                                    <div class="col-sm-12">
                                                                        <p class="title">{{task.job_name}}</p>
                                                                    </div>
                                                                </template>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                                <div class="form-group" v-if="editable">
                                                    <button type="button" @click.prevent="subData" class="btn btn-sm btn-info">确认</button>
                                                    <button type="button" @click.prevent="cancelEdit" class="btn btn-sm btn-default">取消</button>
                                                </div>
                                            </form>
                                           
                                        </div>
                                    </div>
                                     
                                </div> 
                            </div>
                             
                        </div>   
                    </div>
                </div>
            </div> 
        </div>
        <footer class="app-footer">
            <div class="wrapper"></div>
        </footer>
        <div class="modal fade" id="modalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除</h4>
                    </div>
                    <div class="modal-body">
                        确定删除么？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info deling">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Javascript Libs -->
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/common/base.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
<script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
<script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
<!-- Javascript -->
<script type="text/javascript" src="../lib/js/common/app.js"></script>
<script>
    navData.accNav1 = 'task'
    navData.nav1Name = '作业管理'
    navData.accNav2 = 'task-flow'
    navData.accNav3 = '10'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    var Info={}
    var vm = new Vue({
        el:'.role-el',
        data:{
            list:[],
            accTask:[],
            name:'',
            accTaskFlow:{
                job_process_id: "",
                job_process_name: ""
            },
            utaskList:[],
            taskList:[],
            editable:false,
            addTaskable:false,
            validate:{
                name:true,
                rights:true,
                validNameTxt:'作业流程名称不能为空！'
            }

        },
        beforeCreate:function(){
            var that=this
            //流程列表
            $.ajax({
                url:serverUrl.base+serverUrl.workTask+'WorkProcessList',
                type:"post",
                data:{
                    _:Math.random()
                },
                dataType:"json",
                success:function(res){
                    that.list=res.data
                    that.showRight(res.data[0])
                },
                complete:function(res){
                    $('body').loading('close')                        
                }
            })
            //任务列表
            $.ajax({
                url:serverUrl.base+serverUrl.workTask+'ListWorkTask',
                type:"post",
                data:{
                    _:Math.random()
                },
                dataType:"json",
                success:function(res){
                    that.taskList=res.data
                },
                complete:function(res){
                                            
                }
            })
        },
        computed:{
            changeTaskList:function(){ 
                var _temparr=[]
                for(var j=0;j<this.taskList.length;j++){
                    for(var i=0;i<this.accTask.length;i++){
                        if(this.accTask[i].job_id == this.taskList[j].job_id){
                            return false
                        }
                    }
                    _temparr.push(this.taskList[j])
                    
                }
                console.log(_temparr)
                return this.utaskList = _temparr;
            }
        },
        methods:{
            editing:function(elm){
                this.validate.validNameTxt='作业流程名称不能为空！'
                
                if(elm){
                    this.accTaskFlow = elm
                    this.showRight(elm)
                }else{
                    this.accTaskFlow={
                        job_process_id: "",
                        job_process_name: ""
                    }
                    this.name=''
                    this.accTask=[]
                    this.utaskList = this.taskList
                }
                this.editable = true
            },
            deling:function(elm){
                this.editable = false;
                delingModal('taskflow',elm)
            },
            deltask:function(elm){
                this.accTask = this.accTask.filter(function(v){
                    return v.job_id != elm.job_id
                })
            },
            addtask:function(elm){
                this.accTask.push(elm)
                this.utaskList = this.utaskList.filter(function(v){
                    return v.job_id != elm.job_id
                })
            },
            showRight:function(elm){
                //点击流程时呈现作业任务
                var that = this,_data={_:Math.random()}
                if(elm && elm.job_process_id){
                    _data = {
                        id:elm.job_process_id
                    }
                    
                    $.ajax({
                        url:serverUrl.base+serverUrl.workTask+'GetWorkProcess',
                        type:"post",
                        data:_data,
                        dataType:"json",
                        success:function(res){
                            that.accTask=res.data
                        },
                        complete:function(res){
                                                    
                        }
                    })
                    this.accTaskFlow = elm
                    this.name = elm.job_process_name
                    this.editable = false
                }
            },
            subData:function(){
                var that = this
                $.trim(that.name) == ''?this.validate.name=false:this.validate.name=true
                this.accTask.length ==0?this.validate.rights=false:this.validate.rights=true
                if(this.validate.name && this.validate.rights){
                    
                    var upData = {
                        name:that.name,
                        task_id:[]
                    }
                    for(var i=0;i<this.accTask.length;i++){
                        var _elm=''
                        if(this.accTask[i].job_process_detail_id && this.accTask[i].job_process_detail_id != ''){
                            _elm = this.accTask[i].job_process_detail_id
                        }else{
                            _elm='0'
                        }
                        _elm += ','+ this.accTask[i].job_id
                        upData.task_id.push(_elm)
                    }
                    var _txt = '任务流程添加成功！'
                    var _url=serverUrl.base+serverUrl.workTask+'AddWorkProcess'
                    if(this.accTaskFlow.job_process_id != ''){
                        upData.id = this.accTaskFlow.job_process_id
                        _url = serverUrl.base+serverUrl.workTask +'UpdateWorkProcess'
                        _txt = '任务流程修改成功！'
                    }
                    // return false
                    $('body').loading('open')
                    $.ajax({
                        url:_url,
                        type:"post",
                        data:upData,
                        dataType:"json",
                        success:function(res){
                            if(res.code == 0){
                                taskFlowListInit()
                                $("#modalTips").find('.modal-title').text('成功') 
                                $("#modalTips").find('.modal-body').text(_txt)
                            }else if(res.code == '2'){
                                $("#modalTips").find('.modal-title').text('出现问题') 
                                $("#modalTips").find('.modal-body').text(res.info)
                            }else{
                                $("#modalTips").find('.modal-title').text('出现问题') 
                                $("#modalTips").find('.modal-body').text(res.info)
                            }
                            setTimeout(function(){
                                $("#modalTips").modal()    
                            },500)
                        },
                        complete:function(res){
                            that.addTaskable = false
                            $('body').loading('close')
                        },
                        error:function(res){
                            $("#modalTips").find('.modal-title').text('出现问题') 
                            $("#modalTips").find('.modal-body').text(res.info)
                            setTimeout(function(){
                                $("#modalTips").modal()    
                            },500)
                        }
                    })
                }else{
                    return false;
                }
                this.editable = false
            },
            cancelEdit:function(){
                this.name = this.accTaskFlow.job_process_name
                this.showRight(this.accTaskFlow)
            }
            
        },
        watch:{
            accTask:function(val){
                var _temparr=[]
                for(var j=0;j<this.taskList.length;j++){
                    var _notContain=true
                    for(var i=0;i<val.length;i++){
                        if(val[i].job_id == this.taskList[j].job_id){
                            _notContain = false
                        }
                    }
                    
                    if(_notContain){
                        _temparr.push(this.taskList[j])
                    }   
                }
                this.utaskList = _temparr;
            }
        },
        directives: {
            focus: function(el, binding) {
                if (binding.value) {
                    el.focus()
                }
            }
        }

    })
    //删除
    function delingModal(name,elm){
        var _text={
            tit:'删除',
            body1:'确定删除吗？',
            body2:'删除出现问题',
            btn1:'确定',
            cbtn1:'取消',
            cbtn2:'知道了',
            deltit1:'删除成功',
            deltit2:'删除失败',
            delbody1:"删除成功！",
            delbody2:"出现问题",
        },_datas={
            id:'',
            data:{},
            url:''
        }
        switch(name){
            case 'taskflow':
                if(arguments[1]){
                    _datas.data={
                        id:elm.job_process_id
                    }
                    _text.body1 = '确定删除该作业流程么？'
                }

                _datas.url = serverUrl.base+serverUrl.workTask+'deleteWorkProcess'
                _text.tit = '删除作业流程'
                $('#modalDel').find('.modal-title').text(_text.tit)
                $('#modalDel').find('.modal-body').text(_text.body1)
                $('#modalDel').modal()
            break;
            default:
            break;
        }
        $('.deling').off('click').on('click',function(){
            $.post(_datas.url,_datas.data,function(res){
                $('#modalDel').modal('hide')
                $('body').loading('open')
                if(res.code == 0){
                    setTimeout(function(){
                        $('#modalTips').find('.modal-body').text(_text.deltit1)
                        $("#modalTips").modal()    
                    },500)
                    if(Info.row){
                        _dataTable.row(Info.row).remove().draw(false)
                    }else if(!Info.row && Info.rowData){
                        _dataTable.rows({selected:true}).remove().draw(false)
                    }else{
                        taskFlowListInit()
                    }
                    
                }else{
                    setTimeout(function(){
                        $('#modalTips').find('.modal-body').text(_text.deltit2)
                        $("#modalTips").modal()    
                    },500)
                }
            },'json').error(function(res){
                $('#modalDel').modal('hide')
                setTimeout(function(){
                    $('#modalTips').find('.modal-body').text(_text.delbody2)
                    $("#modalTips").modal()    
                },500)
            }).complete(function(){
                $('#modalDel').modal('hide')
                $('body').loading('close')
            })
        })
        
    }
    function taskFlowListInit(){
        $.ajax({
            url:serverUrl.base+serverUrl.workTask+'WorkProcessList',
            type:"post",
            data:{
                _:Math.random()
            },
            dataType:"json",
            success:function(res){
                vm.list=res.data
                vm.showRight(res.data[0])
            },
            complete:function(res){
                                        
            }
        })
    }
</script>
</body>

</html>
